<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>
		Formulario de Contacto
	</title>
	<link rel="stylesheet" type="text/css" href="css/view.css" media="all">
	<script type="text/javascript" src="javascript/view.js"></script>
	<script type="text/javascript" src="javascript/validaciones.js"></script>
	
	<script>
		function cambioCombo(combo)
		{
			var valor = combo.value;
			var otra_carrera = document.getElementById("otra_carrera");
			
			if (valor == 3) {
				otra_carrera.style.display = '';
			} else {
				otra_carrera.style.display = 'none';
			}
		}
	</script>
	
</head>

<body id="main_body" >
	
	<img id="top" src="img/top.png" alt="">
	<div id="form_container">
	
		<h1>
			<a>Formulario de Contacto</a>
		</h1>
		
		<form id="form_contacto" class="appnitro"  method="get" action="ok.html" onSubmit="return validarFormulario(this);">
			<div class="form_description">
				<h2>Formulario de Contacto</h2>
				<p>Por favor, complete el formulario para ponerse en contacto con nosotros</p>
			</div>						
	
			<ul>
			
				<li>
					<label class="description" for="nombre_y_apellido">Nombre (<a class="obligatorio">*</a>) </label>
					<span>
						<input id="nombre" name= "nombre" class="element text" maxlength="255" size="15" value=""/>
						<label>Nombre(s)</label>
					</span>
					<span>
						<input id="apellido" name= "apellido" class="element text" maxlength="255" size="15" value=""/>
						<label>Apellido</label>
					</span> 
				</li>
				
				<li>
					<label class="description" for="password">Password (*) </label>
					<span>
						<input id="password" name="password" class="element text" type="password" maxlength="255" size="15" value=""/>
						<label>Password</label>
					</span>
					<span>
						<input id="password_bis" name= "password_bis" class="element text" type="password" maxlength="255" size="15" value=""/>
						<label>Confirmación</label>
					</span> 
					<p class="guidelines">
						<small>Debe contener al menos 6 caracteres, al menos un dígito, al menos una letra minúscula, al menos una letra mayúscula y al menos uno de estos caracteres especiales: #, $, %, @, ç</small>
					</p> 
				</li>
				
				<li>
					<label class="description" for="fecha">Fecha de nacimiento </label>
					<span>
						<input id="fecha_mes" name="fecha_mes" class="element text" size="2" maxlength="2" value="" type="text"> /
						<label for="fecha_mes">MM</label>
					</span>
					<span>
						<input id="fecha_dia" name="fecha_dia" class="element text" size="2" maxlength="2" value="" type="text"> /
						<label for="fecha_dia">DD</label>
					</span>
					<span>
	 					<input id="fecha_anio" name="fecha_anio" class="element text" size="4" maxlength="4" value="" type="text">
						<label for="fecha_anio">AAAA</label>
					</span> 
				</li>
				
				<li>
					<label class="description" for="email">E-mail </label>
					<div>
						<input id="email" name="email" class="element text medium" type="text" maxlength="255" value=""/> 
					</div> 
				</li>

				<li>
					<label class="description" for="web">Sitio web personal </label>
					<div>
						<input id="web" name="web" class="element text medium" type="text" maxlength="255" value=""/> 
					</div> 
				</li>
							
				<fieldset>
				    <legend>Dirección:</legend>
					
					<li>
						<label class="description" for="calle">Calle (*)</label>
						<div>
							<input id="calle" name="calle" class="element text medium" type="text" maxlength="255" value=""/> 
						</div> 
					</li>	
					
					<li>
						<label class="description" for="numero">Número (*)</label>
						<div>
							<input id="numero" name="numero" class="element text medium" type="text" maxlength="255" value=""/> 
						</div>
						<p class="guidelines">
							<small>Sólo se admiten dígitos</small>
						</p> 
					</li>
				</fieldset>	
				
				<fieldset>
				    <legend>Contacto telefónico:</legend>
				
					<li>
						<label class="description" for="telefono">Teléfono </label>
						<span>
							<input id="telefono_1" name="telefono_1" class="element text" size="3" maxlength="3" value="" type="text"> -
							<label for="telefono_1">(###)</label>
						</span>
						<span>
							<input id="telefono_2" name="telefono_2" class="element text" size="3" maxlength="3" value="" type="text"> -
							<label for="telefono_2">###</label>
						</span>
						<span>
							<input id="telefono_3" name="telefono_3" class="element text" size="4" maxlength="4" value="" type="text">
							<label for="telefono_3">####</label>
						</span>
						<p class="guidelines">
							<small>Si es un celular, no poner el 0 en la carácterística ni el 15 como parte del número</small>
						</p> 
					</li>
					
					<li>
						<label class="description" for="horario">Horario preferido para recibir llamadas </label>
						<span>
							<input id="horario_hora" name="horario_hora" class="element text " size="2" type="text" maxlength="2" value=""/> : 
							<label>HH</label>
						</span>
						<span>
							<input id="horario_min" name="horario_min" class="element text " size="2" type="text" maxlength="2" value=""/> : 
							<label>MM</label>
						</span>
						<span>
							<input id="horario_seg" name="horario_seg" class="element text " size="2" type="text" maxlength="2" value=""/>
							<label>SS</label>
						</span>
						<span>
							<select class="element select" style="width:4em" id="horario_tipo" name="horario_tipo">
								<option value="AM" >AM</option>
								<option value="PM" >PM</option>
							</select>
							<label>AM/PM</label>
						</span> 
					</li>
				</fieldset>						
				
				<li>
					<label class="description" for="intereses">Intereses </label>
					<span>
						<input id="intereses_1" name="intereses_1" class="element checkbox" type="checkbox" value="1" />
						<label class="choice" for="intereses_1">Deportes</label>
						<input id="intereses_2" name="intereses_2" class="element checkbox" type="checkbox" value="1" />
						<label class="choice" for="intereses_2">Computación</label>
						<input id="intereses_3" name="intereses_3" class="element checkbox" type="checkbox" value="1" />
						<label class="choice" for="intereses_3">Videojuegos</label>
					</span>
					<p class="guidelines">
						<small>Seleccionar al menos uno</small>
					</p> 
				</li>
				
				<li>
					<div>
						<label class="description" for="carrera">Carrera (*)</label>
						<select class="element select"  id="carrera" name="horario_tipo" onChange="cambioCombo(this);">
							<option value="0" >-- Seleccione --</option>
							<option value="1" >Ingeniería en Sistemas de Computación</option>
							<option value="2" >Licenciatura en Ciencias de la Computación</option>
							<option value="3" >Otra</option>
						</select>
					</div> 
					<div id="otra_carrera" style="display:none">
						<label class="description" for="carrera">Nombre de la Carrera (*)</label>
						<input id="carrera_desc" name="carrera_desc" class="element text " size="30" type="text" maxlength="50" value=""/>
					</div>
				</li>
				
				<hr/>
				
				<small><strong>(*)</strong> Campos obligatorios</small>
				
				<li class="buttons">
					<input id="saveForm" class="button_text" type="submit" name="submit" value="Enviar" />
				</li>
				
			</ul>
		</form>	
	</div>
	
	<img id="bottom" src="img/bottom.png" alt="">
	</body>
</html>